<template>
  <el-card class="box-card">
    <div ref="canvas"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';


const canvas = ref(null);
let scene, camera, renderer, axesHelper;

onMounted(() => {
  // 创建场景、相机和渲染器
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  // camera = new THREE.PerspectiveCamera(60, 1, 1, 10000);
  camera = new THREE.OrthographicCamera(-4, 4, 4, -4, 0.1, 100)
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(canvas.value.offsetWidth, window.innerHeight - (window.innerHeight / 7) - 30);
  canvas.value.appendChild(renderer.domElement);


  //新建坐标组（包含网格与坐标轴比例尺）
  var group = new THREE.Group();
  // 创建坐标轴辅助对象
  axesHelper = new THREE.AxesHelper(5);

  // 修改坐标轴颜色
  var materialAxesHelper = new THREE.LineBasicMaterial({
    color: 0x000000
  });
  axesHelper.material = materialAxesHelper;
  group.add(axesHelper)


  //XZ面网格
  var gridHelperXZ = new THREE.GridHelper(5, 5, 0x000000, 0x000000);
  var gridHelperContourXZ = new THREE.GridHelper(5, 1, 0x999999, 0x999999);
  // 获取网格辅助器的材质
  var material = gridHelperXZ.material;
  //开启透明度
  material.transparent = true;
  // 设置透明度值（范围为0-1，0表示完全透明，1表示完全不透明）
  material.opacity = 0.15;
  gridHelperContourXZ.position.set(2.5, 0, 2.5);
  gridHelperXZ.position.set(2.5, 0, 2.5);
  group.add(gridHelperXZ)
  group.add(gridHelperContourXZ)


  //YZ面网格
  var gridHelperYZ = new THREE.GridHelper(5, 5, 0x000000, 0x000000);
  var gridHelperContourYZ = new THREE.GridHelper(5, 1, 0x000000, 0x000000);
  gridHelperContourYZ.position.set(2.5, 2.5, 0);
  gridHelperContourYZ.rotation.x = Math.PI / 2;
  var material = gridHelperYZ.material;
  material.transparent = true;
  material.opacity = 0.15;
  var materialYZ = gridHelperContourYZ.material;
  materialYZ.transparent = true;
  materialYZ.opacity = 0.3;
  gridHelperYZ.position.set(2.5, 2.5, 0);
  gridHelperYZ.rotation.x = Math.PI / 2;
  group.add(gridHelperYZ)
  group.add(gridHelperContourYZ)

  //XY面网格
  var gridHelperXY = new THREE.GridHelper(5, 5, 0x000000, 0x000000);
  var gridHelperContourXY = new THREE.GridHelper(5, 1, 0x000000, 0x000000);
  gridHelperContourXY.position.set(0, 2.5, 2.5);
  gridHelperContourXY.rotation.z = Math.PI / 2;
  var materialXY = gridHelperContourXY.material;
  materialXY.transparent = true;
  materialXY.opacity = 0.3;
  var material = gridHelperXY.material;
  material.transparent = true;
  material.opacity = 0.15;
  gridHelperXY.position.set(0, 2.5, 2.5);
  gridHelperXY.rotation.z = Math.PI / 2;
  group.add(gridHelperXY)
  group.add(gridHelperContourXY)



  //xyz坐标轴
  for (let i = 0; i < 6; i++) {
    var label = i;
    var canvasDoc = document.createElement("canvas");
    var context = canvasDoc.getContext("2d");
    context.font = "30px Times New Roman";
    context.fillStyle = "rgba(0, 0, 0, 1)"; // 设置文字颜色和透明度
    context.fillText(label, 2, 30);
    var texture = new THREE.CanvasTexture(canvasDoc);
    var material = new THREE.SpriteMaterial({ map: texture, transparent: true });
    material.opacity = 1; // 设置透明度
    var spriteY = new THREE.Sprite(material);
    spriteY.scale.set(1.5, 1, 0);
    spriteY.position.set(6, i - 0.1, 1); //-0.5
    group.add(spriteY);
  }
  for (let i = 0; i < 5; i++) {
    var label = i;
    var canvasDoc = document.createElement("canvas");
    var context = canvasDoc.getContext("2d");
    context.font = "30px Times New Roman";
    context.fillStyle = "rgba(0, 0, 0,1)"; // 设置文字颜色和透明度
    context.fillText(label, 2, 30);
    var texture = new THREE.CanvasTexture(canvasDoc);
    var material = new THREE.SpriteMaterial({ map: texture, transparent: true });
    material.opacity = 1; // 设置透明度
    var spriteZ = new THREE.Sprite(material);
    spriteZ.scale.set(1.5, 1, 1);
    spriteZ.position.set(i + 0.6, 5, 1) //-0.5
    group.add(spriteZ)
  }
  for (let i = 1; i < 6; i++) {
    var label = i;
    var canvasDoc = document.createElement("canvas");
    var context = canvasDoc.getContext("2d");
    context.font = "30px Times New Roman";
    context.fillStyle = "rgba(0, 0, 0, 1)"; // 设置文字颜色和透明度
    context.fillText(label, 2, 30);
    var texture = new THREE.CanvasTexture(canvasDoc);
    var material = new THREE.SpriteMaterial({ map: texture, transparent: true });
    material.opacity = 1; // 设置透明度
    var spriteX = new THREE.Sprite(material);
    spriteX.scale.set(1.5, 1, 0);
    spriteX.position.set(1, -1.5, i - 1.2) //-0.5
    group.add(spriteX)
  }


  var curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0, 4.9, 0),   // 起点
    new THREE.Vector3(1, 3, 1),
    new THREE.Vector3(1.2, 2, 1),
    new THREE.Vector3(2, 1, 2),
    new THREE.Vector3(5, 0.4, 5)    // 终点，正象限上的点
  ]);
  // 创建曲线几何体
  // var curveGeometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(100)); // 根据曲线获取点坐标
  var curveGeometry = new THREE.TubeBufferGeometry(curve, 200, 0.15, 10, false);
  // 创建线段材质
  var materialCurveGeometry = new THREE.MeshBasicMaterial({ color: 0x00FFFF , transparent: false});
  // 创建曲线网格
  var curveMesh = new THREE.Mesh(curveGeometry, materialCurveGeometry);

  // 将线段对象添加到坐标轴辅助对象中
  axesHelper.add(curveMesh);

  group.position.set(-5 / 2, 0, -5 / 2);
  group.rotation.y = 2
  scene.add(group);
  // 设置相机位置
  // camera.position.set(-2.3, 2, 10);
  // camera.rotation.set(0, 0, 0);
  camera.position.set(-1.5, -1.5, 15);
  camera.rotation.set(0.2, 0, 0);
  // 渲染场景
  animate();

});

const animate = () => {
  // requestAnimationFrame(animate);
  // 旋转坐标轴
  // group.rotation.x += 0.01;
  // axesHelper.rotation.y += 0.01;
  renderer.render(scene, camera);
};

</script>

<style scoped>
canvas {
  display: block;
}
</style>
